<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>报表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../lib/handsontable/handsontable.min.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../lib/axios.min.js"></script>
    <script src="../lib/FileSaver.min.js"></script>
    <script src="../lib/handsontable/handsontable.min.js"></script>
    <script src="../lib/handsontable/zh-CN.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space2">
      <br/><br/>
      <div class="layui-col-md5">
        <form class="layui-form" id="mainForm">
          <div class="layui-form-item">
            <label class="layui-form-label">全宗名称</label>
            <div class="layui-input-inline">
                <div id="qzv"></div>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">档案类型</label>
            <div class="layui-input-inline">
                <div id="kindv"></div>
            </div>
          </div>
          <div class="layui-form-item">
              <label for="new" class="layui-form-label">
                名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="new" name="new"
                  autocomplete="off" class="layui-input">
              </div>
              <button type="button" class="layui-btn" lay-filter="inc" lay-submit="">
                新增
              </button>
          </div>
          <div class="layui-form-item">
            <label for="new" class="layui-form-label">
              报表
            </label>
            <div class="layui-input-inline">
               <div id="repv"></div>
            </div>
            <button type="button" class="layui-btn layui-btn-normal" lay-filter="save" lay-submit="">
              保存
            </button>
          </div>
        </form>
        <br>
        <form class="layui-form">
          <div class="layui-form-item">
            <label for="new" class="layui-form-label">
              字段
            </label>
            <div class="layui-input-inline">
              <div id="fiev"></div>
            </div>
            <button type="button" class="layui-btn" lay-filter="add" lay-submit="">
              添加
            </button>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">其他类型</label>
            <div class="layui-input-inline">
                <div id="kiv"></div>
            </div>
          </div>
          <div class="layui-form-item">
            <label for="new" class="layui-form-label">
              外部字段
            </label>
            <div class="layui-input-inline">
              <div id="fiv"></div>
            </div>
            <button type="button" class="layui-btn" lay-filter="add" lay-submit="">
              添加
            </button>
          </div>
        </form>
      </div>
      <div class="layui-col-md7">
        <div id="example"></div>
      </div>
    </div>
  </div>
  <script id="qzm" type="text/html">
    <select name="qid" id="qid" lay-filter="qzType">
        {{#  layui.each(qz, function(index, item){ }}
        <option value="{{item.qid}}">{{item.title}}</option>
        {{#  }); }}
        {{#  if(qz.length === 0){ }}
            无数据
        {{#  } }}
    </select>
  </script>
  <script id="kindm" type="text/html">
      <select name="kid" id="kid" lay-filter="kindType">
          {{#  layui.each(kind, function(index, item){ }}
          <option value="{{item.kid}}">{{item.kname}}</option>
          {{#  }); }}
          {{#  if(kind.length === 0){ }}
          无数据
          {{#  } }}
      </select>
  </script>
  <script type="text/html" id="repm">
    <select name="rid" lay-filter="fType">
        {{#  layui.each(fie, function(index, item){ }}
        <option value="{{item.rid}}">{{item.name}}</option>
        {{#  }); }}
        {{#  if(rep.length === 0){ }}
            无数据
        {{#  } }}
    </select>
  </script>
  <script type="text/html" id="fiem">
    <select name="fid" lay-filter="fType">
        {{#  layui.each(fie, function(index, item){ }}
        <option value="{{item.field}}">{{item.title}}</option>
        {{#  }); }}
        {{#  if(fie.length === 0){ }}
            无数据
        {{#  } }}
    </select>
  </script>
  <script id="kim" type="text/html">
    <select name="kd" id="kd" lay-filter="kiType">
        {{#  layui.each(kind, function(index, item){ }}
        <option value="{{item.kid}}">{{item.kname}}</option>
        {{#  }); }}
        {{#  if(ki.length === 0){ }}
        无数据
        {{#  } }}
    </select>
  </script>
  <script type="text/html" id="fim">
    <select name="fd" lay-filter="fiType">
        {{#  layui.each(fi, function(index, item){ }}
        <option value="{{item.field}}">{{item.title}}</option>
        {{#  }); }}
        {{#  if(fie.length === 0){ }}
            无数据
        {{#  } }}
    </select>
  </script>
  <script>
    var Crow,Ccol,Ccell,valT,selectRange,selectRangeArr = [];
      var data = [[""]];

      var container = document.getElementById('example');
      var hot = new Handsontable(container, {
        data: data,
        rowHeaders: true,
        colHeaders: true,
        manualColumnResize: true,
        manualRowResize: true,
        mergeCells: true,
        mergeCells: [
          {row:0, col:0, rowspan:5, colspan:1},
          {row:5, col:0, rowspan:4, colspan:1}
        ],
        cell: [
          {row:0, col:0, className: 'htRight htMiddle', editor: false}, // 右对齐垂直居中，只读
          {row:1, col:1, className: 'htLeft'} // 左对齐
        ],
        language: 'zh-CN',
        contextMenu: true,
      });
      var kind = [];
      var kin = [];
      var ki = [];
      var qz = [];
      var fie = [];
      axios.get('/api/get_q').then(res=>{
        for (var i in res.data){
            if (res.data[i].th >= 0){
                qz.push(res.data[i]);
            }
        };

        layui.use(['laytpl','form', 'table'], function(){
            var laytpl = layui.laytpl
            ,form = layui.form
            ,table = layui.table;
            var getTplq = qzm.innerHTML
            ,qzv = document.getElementById('qzv');
            var getTplk = kindm.innerHTML
            ,kindv = document.getElementById('kindv');
            var getTplr = repm.innerHTML
            ,repv = document.getElementById('repv');
            var getTplf = fiem.innerHTML
            ,fiev = document.getElementById('fiev');

            var getTplki = kim.innerHTML
            ,kiv = document.getElementById('kiv');
            var getTplfi = fim.innerHTML
            ,fiv = document.getElementById('fiv');

            laytpl(getTplq).render(qz, function(html){
                qzv.innerHTML = html;
            });

            var a = {qid: qz[0].qid}
            axios.post('/api/get_k_q', a).then(res=>{
                kind = res.data;
                kin = kind[0].head;
                ki = kind;
                fi = ki[0].head;
                laytpl(getTplk).render(kind, function(html){
                  kindv.innerHTML = html;
                });
                laytpl(getTplf).render(fie, function(html){
                  fiev.innerHTML = html;
                });

                laytpl(getTplki).render(ki, function(html){
                  kiv.innerHTML = html;
                });
                laytpl(getTplfi).render(fi, function(html){
                  fiv.innerHTML = html;
                });

                axios.post('/api/get_r', {kid: kind[0].kid}).then(res=>{
                  rep = res.data;
                  
                  laytpl(getTplr).render(rep, function(html){
                    repv.innerHTML = html;
                  });
                  form.render('select')
                })

               
            });
            form.on('submit(save)', function(data){
              console.log(hot.getData().length)
              console.log(hot.getCellMeta(1, 2))
              console.log(hot.countCols(),hot.countRows())
              console.log(hot.getColWidth(2));
              console.log(hot.getRowHeight(1));
            })
        });
      })
  </script>
</body>
</html>